<template>
  <div class="image-upload">
    <!-- 
        action：设置头像要上传的地址
        list-type: 指定上传为照片墙的形式(不要改)
        on-preview： 点击预览会调用的钩子
        on-remove:  点击删除会调用的钩子

        action给一个上传地址，你选择图片后它就会自动上传到这个网址对应的地方
        但是目前我们不要用这个网址，因为它永远只能用post请求进行上传以及永远参数名都叫file
        我们以后要上传不一定请求方式为post，也不一定参数名叫file
        所以到时候我们还得用自定义上传

        我们以前的开发都是服务器提供一个接口，直接上传到我们服务器的接口
        这个接口跟我们数据接口都在同一个服务器
     -->
    <el-upload
      :class="{ disabled: fileList.length > 0 }"
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="doUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 通过定位的形式把它放到上面去 -->
    <el-progress v-if="progShow" :show-text="false" class="prog" type="circle" :percentage="percent"></el-progress>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  // 传入你的存储桶对应的SecretId和SecretKey
  SecretId: 'AKID9AyYu0sUt480qTr8IH3f6MZbVEkJl01q',
  SecretKey: 'fEZhaDbsysb55sQjndFclwxjHciaGjy1'
})

export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  },
  // 侦听imgUrl的值是否改变
  watch: {
    imgUrl (newVal) {
      // 当imgUrl一旦被重新赋值就会调用这个回调函数
      this.fileList = [{ url: newVal }]
    }
  },
  data () {
    return {
      percent: 0,
      progShow: false,
      // 预览显示的图片
      dialogImageUrl: '',
      // 预览弹出框的显示和隐藏
      dialogVisible: false,
      // fileList里要有值，才能显示出这个图片
      fileList: [],
    }
  },
  methods: {
    // 自定义上传调用的钩子
    doUpload (data) {
      // 在这里自己写上传的代码-我要上传，要不要拿到我选择的图片？要，怎么拿？
      // 在上传之前先给fileList一个默认值，这样的目的是为了开始上传的时候不会有上传框
      this.fileList = [ {} ]
      // 准备上传时-显示出进度条
      this.progShow = true
      cos.uploadFile(
        {
          Bucket: 'hmhr90-1306801437' /* 填写自己的存储桶名字 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: data.file.name /* 图片名 */,
          Body: data.file, // 上传文件对象
          SliceSize:
            1024 *
            1024 *
            5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
          // 上传过程调用的回调函数,可以监控上传的过程
          onProgress: (progressData)  => {
            // progressData.percent 可以拿到上传的进度，只不过它的进度是从0到1
            // 如果为1就代表完成了
            // console.log('正在上传中', progressData)
            // 我们的进度条是0-100，而这里拿到的进度是0-1，差了100倍，所以要乘以100做转换
            this.percent = progressData.percent * 100
          }
        },
        // 上传完成都会调用的回调函数
        // 不管是成功还是失败，都会调用
        // 注意：这里是一个function函数，所以function会改变this指向
        // 所以我们可以把它改成箭头函数,那就能保留this指向
        (err, data)  => {
   
          if (err) {
            // 如果err有值，代表上传失败
            console.log('上传失败', err)
          } else {
            // 如果err没值，代表上传成功
            // console.log('上传成功', data)
            this.fileList = [
              { url: 'https://'  + data.Location }
            ]
            // 把这个地址也修改到父
            this.$emit('update:imgUrl', 'https://'  + data.Location)
          }
          // 不管是成功还是失败都要隐藏进度条
          this.progShow = false
        }
      )
    },

    // 点击删除调用的钩子
    handleRemove (file, fileList) {
      // 它默认啥都没干，就意味着我的fileList里还有数据
      // 而fileList还有数据就会导致el-upload还有disabled这个类
      // console.log(file, fileList)
      // 清空fileList里的内容
      this.fileList = []

      console.log('我删了')
    },

    // 点击预览触发
    handlePictureCardPreview (file) {
      // 拿到被点的图片的url，赋值给了对话框里的img
      this.dialogImageUrl = file.url
      // 显示出对话框
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.image-upload {
  position: relative;

  .prog {
    position: absolute;
    left: 10px;
    top: 10px;
  }

.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}

::v-deep {
  .el-upload-list__item {
    transition: none !important;
  }
  .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
  }

  .el-upload-list--picture-card {

    img {
      object-fit: cover !important;
    }
  }
}
}
</style>
